<template>
	<view>
		<view class="w-100 position-fixed top-0 left-0 bg-main"
			:style="'height:'+navBarHeight+'px; z-index: 999999 !important;'">
			<view :style="'height:'+statusBarHeight+'px;'"></view>
			<view style="height: 44rpx; line-height: 44px; letter-spacing: 1rpx;"
				class="text-white font-32 font-weight-bold text-center w-100">首页</view>
		</view>
		<view class="blue-bg-con position-fixed" :style="'top:'+navBarHeight+'px;left:0; width: 100%'"></view>
		<!-- <view class="bg-main w-100 position-fixed top-0 left-0" style="height: 190rpx;border-radius: 0 0 20rpx 20rpx;" v-if="scrollTop < 10"></view> -->
		<view :style="'height:'+navBarHeight+'px;'"></view>
		<z-paging ref="paging" v-model="data.list" @query="queryList" :show-refresher-when-reload="true" :fixed="false"
			:height="paging_height" :to-bottom-loading-more-enabled="true" refresher-theme-style="white">

			<view>
				<view class="pt-2 px-2">
					<view style="overflow: hidden; width: 100%;height: 308rpx; border-radius: 20rpx;">
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
							style="transform: translateY(0)" class="swiper-box" indicator-active-color="#FFF">
							<swiper-item v-for="(item, index) in banner_list" :key="index" class="swiper-box"
								@click.stop="clickBannerItem(item)">
								<image :src="item.image" mode="aspectFill" class="swiper-box"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="px-2 py-1 flex align-center" style="margin-left: 10rpx;">
					<image
						src="https://mp-6907ec39-2ab4-4507-8ad4-63259985c4df.cdn.bspapp.com/cloudstorage/0dd85bb6-5fa6-4de2-be90-655795e0e72e.png"
						class="ring-icon-size"></image>
					<view style="width: 620rpx;">
						<u-notice-bar :list="notice" mode="vertical" bg-color="rgba(255,255,255,0)" color="#333"
							@click="toNoticeInfo" :volume-icon="false"></u-notice-bar>
					</view>
				</view>
				<vk-mall-dynamic-page name="index" :is-action="true"></vk-mall-dynamic-page>

					<view class="mx-2 flex align-center justify-between">
					<image
						src="https://mp-6907ec39-2ab4-4507-8ad4-63259985c4df.cdn.bspapp.com/cloudstorage/efe4228d-8b56-4ad1-a3d7-e94bea8c320c.png"
						class="invitation-coupon-item" @click="vk.navigateTo('/pages/salesman/invite-image/invite-image');"></image>
					<image
						src="https://mp-6907ec39-2ab4-4507-8ad4-63259985c4df.cdn.bspapp.com/cloudstorage/396e6d4c-1877-46e0-a73f-18b050f221af.png"
						class="invitation-coupon-item" @click="toNextPage('/pages/coupon/list')"></image>
				</view>
				<view class="mx-2 mt-3 flex align-center" style="height: 48rpx;">
					<view class="vertical-line-size"></view>
					<view class="line-height-48 font-34 font-weight-bold">新品专栏</view>
				</view>
				<view class="ml-2 flex flex-wrap">
					<view v-for="(item, index) in data.list" :key="index" class="bg-white rounded-20 mt-2 mr-2"
						style="width: 344rpx;" @click="toGoodsDetail(item)">
						<image :src="item.goods_thumb" class="goods_thumb_image_size"></image>
						<view style="padding: 16rpx 20rpx 32rpx 20rpx;">
							<view class="text-ellipsis goods-name-size">{{ item.name }}</view>
							<view class="font-22 line-height-48" style="color: #ED160E;margin-top: 18rpx;">￥<text
									class="font-34 font-weight-bold">{{ salePriceFn(item) }}</text></view>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view style="height: 44rpx;"></view>
			<!-- #endif -->
		</z-paging>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				data: {
					list: []
				},
				statusBarHeight: systemInfo.statusBarHeight,
				navBarHeight: systemInfo.statusBarHeight + 44,
				marginTopHeight: systemInfo.statusBarHeight + 55,
				paging_height: (systemInfo.windowHeight - systemInfo.statusBarHeight - 50) + 'px',
				banner_list: [],
				notice_list: [],
				scrollTop: 0,
				notice: [],
				queryForm1: {
					// 分页数据
					pagination: {
						pageIndex: 1, //当前页码
						pageSize: 10 //每页显示数量
					},
					formData: {
						is_new: true,
					},
					columns: [{
							key: "goods_type",
							mode: "in"
						},
						{
							key: "type",
							mode: "=="
						},
						{
							key: "is_new",
							mode: "=="
						},
					],
					// 排序规则
					sortRule: [{
							name: "sort",
							type: "asc"
						}, // desc降序 asc升序
						{
							name: "_add_time",
							type: "desc"
						}, // desc降序 asc升序
					]
				},
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.queryForm1.pagination.pageIndex = pageNo
				this.getList()
				this.getNoticeList()
			},
			toNoticeInfo(e) {
				let item = this.notice_list[e]
				vk.navigateTo({
					url: `/pages/notice/detail?_id=${item._id}`,
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('data', item);
					}
				});
			},
			getNoticeList() {
				let that = this;
				vk.callFunction({
					url: 'client/pub.getComponentsList',
					data: {
						name: "index"
					},
					success: (data) => {
						let list = data.list.filter(item => {
							return item.type == 'swiper'
						})

						that.banner_list = list.length > 0 ? list[0].data.list : []
						let a_list = data.list.filter(item => {
							return item.type == 'luck-image'
						})
						let b_list = data.list.filter(item => {
							return item.type == 'day-image'
						})
						let c_list = data.list.filter(item => {
							return item.type == 'image'
						})
						vk.setVuex('luck-load-image', a_list.length > 0 ? a_list[0].data.load_image : '')
						vk.setVuex('day-load-image', b_list.length > 0 ? b_list[0].data.load_image : '')

						vk.setStorageSync('my-load-image', c_list.length > 0 ? c_list[0].data.list[0].image : '');
						console.log(11111, c_list)
					}
				});
				// vk.callFunction({
				// 	url: 'client/pub.getBannerList',
				// 	success: (data) => {
				// 		that.banner_list = data.rows
				// 	}
				// });
				vk.callFunction({
					url: 'client/pub.getIndexNotice',
					success: (data) => {
						that.notice_list = data.rows
						that.notice = []
						data.rows.forEach(item => {
							that.notice.push(item.title)
						})
					}
				});
			},
			clickBannerItem(item) {
				if (item.page) {
					vk.navigateTo({
						url: item.page
					});
				} else if (item.content) {
					vk.navigateTo('/pages/notice/banner_info?_id=' + item._id + '&mode=banner');
				}
			},
			getList() {
				let that = this;
				vk.callFunction({
					url: 'client/pub.getGoodsList',
					data: that.queryForm1,
					success: (data) => {
						that.$refs.paging.complete(data.rows)
					}
				});
			},

			toNextPage(url) {
				vk.navigateTo(url);
			},

			// 销售价计算
			salePriceFn(goods) {
				let that = this;
				let str = "";
				if (goods.sku_list && goods.sku_list.length > 0) {
					let min = Number.MAX_VALUE;
					let max = 0;
					goods.sku_list.map((item, index) => {
						if (item.price < min) {
							min = item.price;
						}
						if (item.price > max) {
							max = item.price;
						}
					});
					str = `${vk.pubfn.priceFilter(min)}`
				}
				return str;
			},

			toGoodsDetail(goods) {
				vk.myfn.goods.pageToDetail(goods);
			},
			fxLvCom(lv) {
				try {
					let level_rule = vk.getVuex('$user.mchInfo.fx.level_rule');
					let item = vk.pubfn.getListItem(level_rule, "lv", lv);
					console.log(item)
					return item.name;
				} catch (err) {
					return "异常";
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	.blue-bg-con {
		height: 280rpx;
		width: 100%;
		background: linear-gradient(180deg, #1D86FF 0%, #BDDCFF 80%, #F7F7F7 100%);
		border-radius: 0 0 20rpx 20rpx;
	}


	.swiper-box {
		height: 308rpx;
		width: 100%;
		border-radius: 20rpx;
	}

	.invitation-coupon-item {
		width: 348rpx;
		height: 168rpx;
		border: 1rpx dashed #C0C0C0;
		border-radius: 20rpx;
	}

	.gift-con {
		width: 344rpx;
		height: 374rpx;
		background: linear-gradient(0deg, #FFFFFF 0%, #FFD9D9 100%);
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.right-small-con {
		width: 344rpx;
		height: 176rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 13rpx 5rpx 13rpx 18rpx;
	}

	.blue-bg-color {
		background: linear-gradient(180deg, #BDDCFF 0%, #FFFFFF 100%);
	}

	.blue-bg-color2 {
		background: linear-gradient(180deg, #ffa7b2 0%, #FFFFFF 100%);
	}

	.blue-bg-color3 {
		background: linear-gradient(180deg, #fef6b0 0%, #FFFFFF 100%);
	}

	.purple-bg-color {
		background: linear-gradient(0deg, #FFFFFF 0%, #FFD8F8 100%);
	}

	.goods_thumb_image_size {
		width: 344rpx;
		height: 354rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.goods-name-size {
		font-size: 31rpx;
		line-height: 44rpx;
		font-weight: bold;
	}

	.white-next-icon-size {
		width: 18rpx;
		height: 18rpx;
		margin-left: 4rpx;
	}

	.go-btn-size {
		width: 80rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gift-image-size {
		width: 270rpx;
		height: 212rpx;
		margin-left: 8rpx;
	}

	.mang-he-image-size {
		width: 150rpx;
		height: 150rpx;
	}

	.ring-icon-size {
		width: 44rpx;
		height: 44rpx;
	}

	.home_nav_con {}
</style>
